<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<%@ page import="com.josiejune.documentdispatch.models.DAO" %>
<%@ page import="com.josiejune.documentdispatch.models.DailyStatus" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.josiejune.documentdispatch.models.DAO" %>
   
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 <link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/wordcloud/wc.css"/>
    <script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/wordcloud/wc.js"></script>
     <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
  <script type="text/javascript"> 
 
  //Load the Visualization API and the ready-made Google table visualization
   google.load('visualization', '1', {'packages':['corechart', 'table']});
 
  // Set a callback to run when the API is loaded.
  google.setOnLoadCallback(init);
 

  // Send the query to the data source.
  function init() {
 
    var query = new google.visualization.Query('gettags');
    var query2 = new google.visualization.Query('dailystatusdata');
    var query3 = new google.visualization.Query('operatorperformance');
    var query4 = new google.visualization.Query('getpoprocessingtime');
    
    // Send the query with a callback function.
    query.send(handleQueryResponse);
    query2.send(drawChart2);
    query3.send(drawChart3);
    query4.send(drawChart4);
  }
 
  // Handle the query response.
  function handleQueryResponse(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    // Draw the visualization.
    var data = response.getDataTable();
    var wc = new WordCloud(document.getElementById('wcdiv'));
    wc.draw(data, {allowHtml: true});
  }
  
  // Handle the query response.
  function drawChart2(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }
 
    // Draw the visualization.
    var data = response.getDataTable();
    var chart2 = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart2.draw(data, {legend: 'bottom', height: 300, title: 'Daily Status',
    	vAxis: {minValue: 0}	
    });

  }
  
//Handle the query response.
  function drawChart3(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }
 
    // Draw the visualization.
    var data = response.getDataTable();
    chart3 = new google.visualization.ColumnChart(document.getElementById('queue_length'));
    chart3.draw(data, {legend: 'none', height: 300, title: 'Orders in Queues',
    	vAxis: {minValue: 0}, hAxis: {showTextEvery: 1}
    });
    
    google.visualization.events.addListener(chart3, 'select', clickHandler);
    
  }
  
  function clickHandler(){
  	  var selection = chart3.getSelection();
  	  for (var i = 0; i < selection.length; i++) {
  	    var item = selection[i];
  	    if (item.row != null && item.column != null) {
  	      message += '{row:' + item.row + ',column:' + item.column + '}';
  	    } else if (item.row != null) {
  	      message += '{row:' + item.row + '}';
  	    } else if (item.column != null) {
  	      message += '{column:' + item.column + '}';
  	    }
  	  }
  	  if (message == '') {
  	    message = 'nothing';
  	  }
  	  alert('You selected ' + message);
  	}
  
  function drawChart4(response) {
	    if (response.isError()) {
	      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
	      return;
	    }
	 
	    // Draw the visualization.
	    var data = response.getDataTable();
	    chart4 = new google.visualization.ColumnChart(document.getElementById('getpoprocessingtime'));
	    chart4.draw(data, {legend: 'none', height: 300, title: 'Avg Processing Time',
	        hAxis: {showTextEvery: 1}
	    });

	  }
  
  </script> 
  
<title>Document Dispatch</title> 
	
  <link rel="stylesheet" href="styles/stencil/screen.css" type="text/css" media="screen" charset="utf-8" /> 
  <link rel="stylesheet" href="styles/stencil/custom.css" type="text/css" media="screen" title="no title" charset="utf-8" /> 

</head> 
 <body id="index"> 
 
<div id="page" class="xgrid xfluid"> 
	
	<div id="header" class="x12">		
		<div class="xpad"> 
			<h1>Home</h1>		
		</div> 
	</div> 

<%@ include file="headermenu.jsp" %>
<br/>
<%
	DAO dao = new DAO();
	DailyStatus status = dao.getDailyStatus();
	int numMMsgToday = status.getTotalManagedReceived();
	int numUMsgToday = status.getTotalUnmanagedReceived();
	int numCMMsgToday = status.getTotalManagedCompleted();
	int numCUMsgToday = status.getTotalUnmanagedCompleted();
	int numOnlineOps = dao.getNumberOnlineOperators();
%>

<div class="x6">
<h4>Messages Today:</h4> 
<h1><%= numMMsgToday+numUMsgToday %></h1>
</div>

<div class="x6">
<h4>Online Operators:</h4> 
<h1><%= numOnlineOps %></h1>
</div>

<div class="x3">
<h4>Managed Received:</h4> 
<h1><%= numMMsgToday %></h1>
</div>

<div class="x3">
<h4>Managed Completed:</h4> 
<h1><%= numCMMsgToday %></h1>
</div>


<div class="x3">
<h4>Unmanaged Received:</h4> 
<h1><%= numUMsgToday %></h1>
</div>

<div class="x3">
<h4>Unmanaged Completed:</h4> 
<h1><%= numCUMsgToday %></h1>
</div>

<div class="x6" id="chart_div"></div>
<div class="x6" id="queue_length"></div>
<div class="x6" id="getpoprocessingtime"></div>
<div class="x12" id="wcdiv"></div> 
</div>

</body> 
</html>